<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>十万个为什么</title>
    <link rel="stylesheet" href="./bootstrap.css">
    <link rel="icon" href="./img/Logo.jpg" type="image/x-icon">
    <link rel="stylesheet" href="./swgwhy_class.css">
    <link rel="stylesheet" href="./font_1hifg03ookt/iconfont.css">
    <style>
        .swgwhy{
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            padding-top: 0px;
            margin: 0px;
            background-color: rgb(180, 224, 236);
        }
        .swgwhy .swgwhy_head{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 1440px;
            height: 130px;
            padding-top: 56px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 64px;
        }
        .swgwhy .swgwhy_top{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 1440px;
            height: 100%;
            margin: auto;
        }
        .swgwhy .swgwhy_bottom{
            display: flex;
            justify-content: center;
            width: 100%;
            height: 300px;
            background-color: rgb(72, 0, 122);
            padding-top: 50px;
            padding-bottom: 20px;
        }
        #carouselExampleSlidesOnly {
            width: 1200px;
            height: 150px;
        }
        .carousel-item img {
            max-width: 100%;
            max-height: 553px;
            margin: auto;
        }
        .swgwhy_top ul {
            display: flex;
            flex-flow: row wrap;
            width: 1040px;
            height: 100%;
            list-style-type: none;
            justify-content: space-between;
            background-color: rgb(180, 224, 236);
            align-items: center;
            padding: 0px;
        }
        .swgwhy_top li {
            margin: 10px 0;       
            width: 235px;
            height: 450px;
            list-style-type: none;
            background-color: #ffffff;
            padding: 20px;
            border-radius: 10px;
        }
        
        .li1 {
            color: rgb(84, 54, 161);
            font-weight: bold;
            font-size: 16px;
            height: 50px;
            width: 200px;
            background-color: rgb(255, 255, 255);
        }

        .li2 {
            color: #000000;
            font-size: 15px;
            height: 140px;
            width: 200px;
            background-color: rgb(255, 255, 255);
        }
        .img-con {
            width: 200px;
            height: 200px;
            display: inline-block;
            position: relative;
            overflow: hidden;
            border-radius: 50%;
        }

        .img-con img {
            width: 200px;
            height: 250px;
            cursor: pointer;
            display: block;
            height: auto;
        }
        a{
            text-decoration: none;
            
        }
        .li-time{
            font-size: smaller;
            color: rgb(140, 147, 150);
            font-weight: bold;
            height: 20px;
            width: 200px;
        }
        * {
                        margin: 0;
                        padding: 0;
                        box-sizing: border-box;
        }
            
                    body {
                        min-height: 100vh;
                        background-color: var(--body-color);
                        transition: all 0.3s ease;
                    }
            
                    /* 设置全局变量 */
                    :root {
                        --body-color: #E4E9F7;
                        --shell-color: #FFF;
                        --primary-color: #695CFE;
                        --primary-color-light: #F6F5FF;
                        --toggle-color: #DDD;
                        --text-color: #707070;
                    }
            
                    /* 深色主题变量 */
                    .dark {
                        --body-color: #202224;
                        --shell-color: #171717;
                        --primary-color: #3a3b3c;
                        --primary-color-light: #3a3b3c;
                        --toggle-color: #fff;
                        --text-color: #ccc;
                    }
            
                    .shell {
                        position: fixed;
                        top: 0;
                        left: 0;
                        height: 100%;
                        width: 250px;
                        padding: 10px 14px;
                        background: var(--shell-color);
                        transition: all 0.3s ease;
                        z-index: 100;
                    }
            
                    .close {
                        width: 88px;
                    }
            
                    .shell li {
                        height: 50px;
                        list-style: none;
                        display: flex;
                        align-items: center;
                        margin-top: 10px;
                    }
            
                    .image,
                    .icon {
                        min-width: 60px;
                        border-radius: 6px;
                    }
            
                    .icon {
                        min-width: 60px;
                        border-radius: 6px;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font: 300 23px '';
                    }
            
                    .text,
                    .icon {
                        color: var(--text-color);
                        transition: all 0.3s ease;
                    }
            
                    .text {
                        font: 500 17px;
                        white-space: nowrap;
                        opacity: 1;
                    }
            
                    .shell.close .text {
                        opacity: 0;
                    }
            
                    header {
                        position: relative;
                    }
            
                    .image-text {
                        display: flex;
                        align-items: center;
                    }
            
                    .logo-text {
                        display: flex;
                        flex-direction: column;
                    }
            
                    .name {
                        margin-top: 2px;
                        font: 600 18px '';
                    }
            
                    .software {
                        font-size: 20px;
                        margin-top: -2px;
                        display: block;
                    }
            
                    .image {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
            
                    .image img {
                        width: 45px;
                        border-radius: 6px;
                    }
            
                    .toggle {
                        position: absolute;
                        top: 50%;
                        right: -25px;
                        transform: translateY(-50%) rotate(180deg);
                        height: 25px;
                        width: 25px;
                        background-color: var(--primary-color);
                        color: var(--shell-color);
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 15px;
                        cursor: pointer;
                        transition: all 0.3s ease;
                    }
            
                    .toggle {
                        color: #ccc;
                    }
            
                    .shell.close .toggle {
                        transform: translateY(-50%) rotate(0deg);
                    }
            
                    .menu {
                        margin-top: 40px;
                    }
            
                    li.search-box {
                        border-radius: 6px;
                        background-color: var(--primary-color-light);
                        cursor: pointer;
                        transition: all 0.3s ease;
                    }
            
                    li.search-box input {
                        height: 100%;
                        width: 100%;
                        outline: none;
                        border: none;
                        background-color: var(--primary-color-light);
                        color: var(--text-color);
                        border-radius: 6px;
                        font-size: 17px;
                        font-weight: 500;
                        transition: all 0.3s ease;
                    }
            
                    .shell li a {
                        list-style: none;
                        height: 100%;
                        background-color: transparent;
                        display: flex;
                        align-items: center;
                        height: 100%;
                        width: 100%;
                        border-radius: 6px;
                        text-decoration: none;
                        transition: all 0.3s ease;
                    }
            
                    .shell li a:hover {
                        background-color: var(--primary-color);
                    }
            
                    .shell li a:hover .icon,
                    .shell li a:hover .text {
                        color: var(--shell-color);
                    }
            
                    .menu-bar {
                        height: calc(100% - 55px);
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        overflow-y: scroll;
                    }
            
                    .menu-bar::-webkit-scrollbar {
                        display: none;
                    }
            
                    .menu-bar .mode {
                        border-radius: 6px;
                        background-color: var(--primary-color-light);
                        position: relative;
                        transition: all 0.3s ease;
                    }
            
                    .menu-bar .mode .sun-moon {
                        height: 50px;
                        width: 60px;
                    }
            
                    .mode .sun-moon i {
                        position: absolute;
                    }
            
                    .mode .sun-moon i.sun {
                        opacity: 0;
                    }
            
                    .toggle-switch {
                        position: absolute;
                        right: 0;
                        height: 100%;
                        min-width: 60px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 6px;
                        cursor: pointer;
                    }
            
                    .switch {
                        position: relative;
                        height: 22px;
                        width: 40px;
                        border-radius: 25px;
                        background-color: var(--toggle-color);
                        transition: all 0.3s ease;
                    }
            
                    .switch::before {
                        content: '';
                        position: absolute;
                        height: 15px;
                        width: 15px;
                        border-radius: 50%;
                        top: 50%;
                        left: 5px;
                        transform: translateY(-50%);
                        background-color: var(--shell-color);
                        transition: all 0.3s ease;
                    }
            
                    .dark .shell li a:hover .icon,
                    .dark .shell li a:hover .text {
                        color: #ccc;
                    }
            
                    .dark .mode .sun-moon i.sun {
                        opacity: 1;
                    }
            
                    .dark .mode .sun-moon i.moon {
                        opacity: 0;
                    }
            
                    .dark .switch::before {
                        left: 20px;
                    }
    </style>
</head>
<body class="swgwhy">
        <div class="swgwhy_ai">
            </head>
            <body>
                <nav class="shell close">
                    <header>
                        <div class="image-text">
                            <span class="image">
                                <img src="img/Logo.jpg" alt="">
                            </span>
                            <div class="text logo-text">
                                <span class="name">用户名</span>
                                <span class="software">-十万个为什么-</span>
                            </div>
                        </div>
                        <i class="iconfont icon-xiangyoujiantou toggle"></i>
                    </header>
                    <div class="menu-bar">
                        <div class="menu">
                            <li class="search-box">
                                <i class="iconfont icon-sousuo icon"></i>
                                <input type="text" placeholder="搜索...">
                            </li>
                            <ul class="menu-links">
                                <li class="nav-link">
                                    <a href="#">
                                        <i class="iconfont icon-zhuye icon"></i>
                                        <span class="text nac-text">主页</span>
                                    </a>
                                </li>
            
                                <li class="nav-link">
                                    <a href="#">
                                        <i class="iconfont icon-wodeshoucang icon"></i>
                                        <span class="text nac-text">我的收藏</span>
                                    </a>
                                </li>
            
                                <li class="nav-link">
                                    <a href="#">
                                        <i class="iconfont icon-lishijilu icon"></i>
                                        <span class="text nac-text">历史记录</span>
                                    </a>
                                </li>
            
                                <li class="nav-link">
                                    <a href="#">
                                        <i class="iconfont icon-xiaoxi icon"></i>
                                        <span class="text nac-text">消息</span>
                                    </a>
                                </li>
            
                                <li class="nav-link">
                                    <a href="#">
                                        <i class="iconfont icon-wuguan icon"></i>
                                        <span class="text nac-text">AI</span>
                                    </a>
                                </li>
            
                                <li class="nav-link">
                                    <a href="#">
                                        <i class="iconfont icon-chuangzuozhongxin icon"></i>
                                        <span class="text nac-text">创作中心</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="bottom-content">
                            <li class="">
                                <a href="#">
                                    <i class="iconfont icon-logout icon"></i>
                                    <span class="text nac-text">注销</span>
                                </a>
                            </li>
                            <li class="mode">
                                <div class="sun-moon">
                                    <i class="iconfont icon-yejianmoshi icon sun"></i>
                                    <i class="iconfont icon-yejian icon moon"></i>
                                </div>
                                <span class="mode-text text">夜间模式</span>
                                <div class="toggle-switch">
                                    <span class="switch"></span>
                                </div>
                            </li>
                        </div>
                    </div>
            
                </nav>
            
            </body>
            
            
            <script>
            
                const body = document.querySelector('body'),
                    shell = body.querySelector('nav'),
                    toggle = body.querySelector(".toggle"),
                    searchBtn = body.querySelector(".search-box"),
                    modeSwitch = body.querySelector(".toggle-switch"),
                    modeText = body.querySelector(".mode-text");
                // 点击toggle元素时触发事件
                toggle.addEventListener("click", () => {
                    // 切换shell元素的close类
                    shell.classList.toggle("close");
                })
                // 点击searchBtn元素时触发事件
                searchBtn.addEventListener("click", () => {
                    // 移除shell元素的close类
                    shell.classList.remove("close");
                })
                // 点击modeSwitch元素时触发事件
                modeSwitch.addEventListener("click", () => {
                    // 切换body元素的dark类
                    body.classList.toggle("dark");
                    // 如果body元素包含dark类
                    if (body.classList.contains("dark")) {
                        modeText.innerText = "白日模式";
                    } else {
                        modeText.innerText = "夜间模式";
                    }
                });
            
            
            </script>
            
            </html>
            
        </div>    
  </div>    
    <div class="swgwhy_head">
        <header class="why_head">
            <nav class="why_header">
                <div class="menu-items">
                    <a href="#" style="display: flex; text-decoration: none;flex-direction: column; align-items: center;">
                        <img src="./img/Logo.jpg" style="width: 120px;height: 120px;border-radius: 50%;"></a>
                    <ul class="menu-ul">
                        <li class="menu-li-0"><h1></h1></li>
                        <li class="menu-li"><a href="#" style="text-decoration: none;color: white;"><h1><b>发现</b></h1></a></li>
                        <li class="menu-li"><a href="#" style="text-decoration: none;color: white;"><h1><b>生物</b></h1></a></li>
                        <li class="menu-li"><a href="#" style="text-decoration: none;color: white;"><h1><b>科学</b></h1></a></li>
                        <li class="menu-li"><a href="#" style="text-decoration: none;color: white;"><h1><b>历史</b></h1></a></li>
                        <li class="menu-li"><a href="#" style="text-decoration: none;color: white;"><h1><b>地理</b></h1></a></li>
                        <li class="menu-li"><a href="#" style="text-decoration: none;color: white;"><h1><b>其他</b></h1></a></li>
                    </ul>
                </div>
            </nav>
        </header>
    </div>
    <main class="swgwhy_top"> 
        <ul>
        <li>
            <a href=" html2">
                <div class="img-con"><img src="img/swgwhy-img/gsg.jpg">
                </div>
                <div class="li1" >为什么南极比北极更冷</div>
                <div class="li2">同是位于地球两极，纬度高低相同，太阳照射的时间长短和角度也一样。南北极都还要经过为期六个月的极夜时期。</div>
                <div class="li-time">2023.1</div>
            </a >
        </li>
            <li><a href="html1 ">
                    <div class="img-con"><img src="img/swgwhy-img/gg r s.jpg">
                    </div>
                    <div class="li1">中国新旧“四大火炉”分别是哪儿？</div>
                    <div class="li2">炎炎夏日，酷暑难耐，我国南北普遍高温，在当下来讨论中国的“四大火炉”城市是十分合时宜的，所谓四大火炉是指中国天气炎热程度最严重的四个城市。</div>
                    <div class="li-time">2023.1</div>
                </a >
            </li>
            <li>
                <a href=" html2">
                    <div class="img-con"><img src="img/swgwhy-img/s g s.jpg">
                    </div>
                    <div class="li1">为什么海水浇不灭海底火山呢?</div>
                    <div class="li2">地球上的火山活动主要集中在板块边界处，而有些火山分布于大洋中脊与大洋边缘的岛弧处。这种“火”就叫海底火山。</div>
                    <div class="li-time">2023.1</div>
                </a >
            </li>
            <li><a href="./swgwhy_content.html">
                <div class="img-con"><img src="img/swgwhy-img/hft h t.jpg">
                </div>
                <div class="li1">地震形成的原因是什么？</div>
                <div class="li2">我们对地震这个词并不陌生，汶川大地震、唐山大地震等大地震给我国带来了很多灾难和损失，今年2月的土耳其大地震也是引发全世界关注。</div>
                <div class="li-time">2023.1</div>
            </a >
        </li>
        <li>
            <a href=" html2">
                <div class="img-con"><img src="img/swgwhy-img/ter t.jpg">
                </div>
                <div class="li1">为什么世界最热的地方不在赤道上而在撒哈拉沙漠？</div>
                <div class="li2">许多人认为赤道应该是地球上最热的地方，因为它几乎每天都处于太阳直射的位置。通常根据气候带的划分，而根据这种划分规律，人们自然会认为赤道是最热的地方。</div>
                <div class="li-time">2023.1</div>
            </a >
        </li>
            <li><a href="html1 ">
                    <div class="img-con"><img src="img/swgwhy-img/tet r.jpg">
                    </div>
                    <div class="li1">为什么河流总是弯弯曲曲的？</div>
                    <div class="li2">回想一下你所记忆中的河流是不是都是弯弯曲曲的？其实，地球上所有的河流都是弯曲的，没有一条是笔直的。这到底是为什么呢？</div>
                    <div class="li-time">2023.1</div>
                </a >
            </li>
            <li>
                <a href=" html2">
                    <div class="img-con"><img src="img/swgwhy-img/t热e t.jpg">
                    </div>
                    <div class="li1">为什么火山多分布在板块边缘？</div>
                    <div class="li2">根据地球的板块学说,火山地震在边缘地带是多发的(无论是生长边界还是消亡边界),只是因为生长边界多处于洋底,远离大陆,对人类的影响相对要小得多而已。</div>
                    <div class="li-time">2023.1</div>
                </a >
            </li>
            <li><a href="html1 ">
                <div class="img-con"><img src="img/twkx.png">
                </div>
                <div class="li1">地球的自转和公转如何造成了四季变化？</div>
                <div class="li2">地球的四季更替是由地球自转和公转所带来的，这是一个引人入胜的天文现象。通过解释地球的自转和公转，我们可以揭开四季更替的奥秘。</div>
                <div class="li-time">2023.1</div>
            </a >
        </li>
        <li>
            <a href=" html2">
                <div class="img-con"><img src="img/4.png">l
                </div>
                <div class="li1">为什么许多动物濒临灭绝？</div>
                <div class="li2">沙漠是地球上最恶劣的环境之一，拥有高温、干燥、贫瘠等多种极端条件。许多动物却能够在这种环境中生存下来。</div>
                <div class="li-time">2023.1</div>
            </a >
        </li>
        <li><a href="html1 ">
            <div class="img-con"><img src="img/6.png">
            </div>
            <div class="li1">鸟为什么会飞</div>
            <div class="li2">有时，我们可以见到鸟儿成群结队地在空中平稳地飞翔，或者在空中划出飞行的“波浪”。不同的鸟有着自己的独家飞行本领。</div>
            <div class="li-time">2023.1</div>
        </a >
        </li>
        <li><a href="html1 ">
            <div class="img-con"><img src="img/5.png">
            </div>
            <div class="li1">为什么冬天小动物们要冬眠</div>
            <div class="li2">有时，我们可以见到鸟儿成群结队地在空中平稳地飞翔，或者在空中划出飞行的“波浪”。不同的鸟有着自己的独家飞行本领。</div>
            <div class="li-time">2023.1</div>
        </a >
        </li>
        <li>
        <a href=" html2">
            <div class="img-con"><img src="img/3.png">
            </div>
            <div class="li1">为什么许多动物濒临灭绝？</div>
            <div class="li2">沙漠是地球上最恶劣的环境之一，拥有高温、干燥、贫瘠等多种极端条件。许多动物却能够在这种环境中生存下来。</div>
            <div class="li-time">2023.1</div>
        </a >
    </li>
    <li><a href="html1 ">
        <div class="img-con"><img src="img/5.png">
        </div>
        <div class="li1">为什么冬天小动物们要冬眠</div>
        <div class="li2">有时，我们可以见到鸟儿成群结队地在空中平稳地飞翔，或者在空中划出飞行的“波浪”。不同的鸟有着自己的独家飞行本领。</div>
        <div class="li-time">2023.1</div>
    </a >
    </li>
    <li>
    <a href=" html2">
        <div class="img-con"><img src="img/3.png">
        </div>
        <div class="li1">为什么许多动物濒临灭绝？</div>
        <div class="li2">沙漠是地球上最恶劣的环境之一，拥有高温、干燥、贫瘠等多种极端条件。许多动物却能够在这种环境中生存下来。</div>
        <div class="li-time">2023.1</div>
    </a >
    </li>
    <li><a href="html1 ">
        <div class="img-con"><img src="img/5.png">
        </div>
        <div class="li1">为什么冬天小动物们要冬眠</div>
        <div class="li2">有时，我们可以见到鸟儿成群结队地在空中平稳地飞翔，或者在空中划出飞行的“波浪”。不同的鸟有着自己的独家飞行本领。</div>
        <div class="li-time">2023.1</div>
    </a >
    </li>
    <li>
    <a href=" html2">
        <div class="img-con"><img src="img/3.png">
        </div>
        <div class="li1">为什么许多动物濒临灭绝？</div>
        <div class="li2">沙漠是地球上最恶劣的环境之一，拥有高温、干燥、贫瘠等多种极端条件。许多动物却能够在这种环境中生存下来。</div>
        <div class="li-time">2023.1</div>
    </a >
    </li>
            </ul>
       </main>
    <div class="swgwhy_bottom">
        <div class="swgwhy_foot">
            <div class="foot_top">
                <img src="./img/Logo.jpg" style="width: 75px;height: 75px;margin-right: 40px;"><img src="./img/jk-logo.png" style="width: 75px;height: 75px;background-color: #7ccee7;">
            </div>
            <div class="footer">
                <h2 style="color: white;margin: 0px;font-size: 15px;">版权所有@江西科技学院瀚岳软件工作室</h2>
                <p></p>
                <nav style="margin-top: 30px;">
                    <h2 style="height: 50px;"><a href="#" style="text-decoration: none;color: white;font-size: 12px;">条款和条件</a> <a href="#" style="text-decoration: none;color: white;font-size: 12px;">隐私政策</a> <a href="#" style="text-decoration: none;color: white;font-size: 12px;">关于十万个为什么的重要通知</a> <a href="#" style="text-decoration: none;color: white;font-size: 12px;">十万个为什么偏好</a> <a href="#" style="text-decoration: none;color: white;font-size: 12px;">行为准则</a> <a href="#" style="text-decoration: none;color: white;font-size: 12px;">联系我们</a> <a href="#" style="text-decoration: none;color: white;font-size: 12px;">关于江西科技学院</a></h2>
                </nav>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="./bootstrap.bundle.min.js"></script>
    <script src="./bootstrap.js"></script>
</body>
</html>